<template>
  <view>
    <image src="/static/user_bg.png" class="user_bg" mode="widthFix"/>
    <view style="padding-top: 138rpx">
      <view class="f_row_center" style="padding:0 30rpx 0 60rpx">
        <view class="flex_1">
          <view style="font-size: 42rpx;font-weight: bold;margin-bottom: 30rpx">{{ userName }}</view>
          <view style="color: #646464;font-size: 28rpx">{{ mobile }}</view>
        </view>
        <button @click="loginOut" class="login_out_btn" type="primary">退出登录</button>
      </view>
      <view class="box_list">
        <view v-for="(item,ind ) in list" :key="ind" @click="itemClick(item)">
          <item-user-title-view :title="item.title" :img="item.img"/>
        </view>

      </view>
    </view>


    <!-- 退出弹窗 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="确认退出登录" cancelText="取消" confirmText="确认" title="退出" content="确认退出登录!"
                        @confirm="dialogConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import ItemUserTitleView from "@/pages/user/components/item_user_title_view.vue";
import XRouterConfig from "@/api/XRouterConfig";
import BaseApi from "@/api/BaseApi";

@Component({
  components: {
    ItemUserTitleView
  }
})
export default class UserView extends Vue {

  list = [
    {
      title: '通讯录',
      img: '/static/txl.png',
      path: 'user_contact'
    },
    {
      title: '核定计算器',
      img: '/static/hdjsq.png',
      path: 'user_calculator'
    },
    {
      title: '政策法规',
      img: '/static/zcfg.png',
      path: 'user_rule'
    },
    {
      title: '数据解锁',
      img: '/static/sjjs.png',
      path: 'user_data_open'
    },
    {
      title: '修改密码',
      img: '/static/xgmm.png',
      path: 'user_update_psw'
    },
  ];


  get userName() {
    return BaseApi.instance().userInfo.sysusername
  }

  get mobile() {
    return BaseApi.instance().userInfo.mobile
  }

  dialogConfirm() {
    BaseApi.instance().logout();
    XRouterConfig.replace('login_view')
  }

  dialogClose() {
    console.log('点击关闭')
  }

  itemClick(item: any) {
    XRouterConfig.goTo(item.path)
  }

  loginOut() {
    (this.$refs.alertDialog as any).open()
  }
}
</script>

<style scoped>
.user_bg {
  width: 100vw;
  position: absolute;
  z-index: -1;
}

.login_out_btn {
  /*width: 180rpx;*/
  height: 70rpx;
  padding: 0 33rpx;
  color: #FFFFFF;
  font-size: 32rpx;
  line-height: 70rpx;
  background: linear-gradient(90deg, #64ACF6 0%, #3F77F4 100%);
  box-shadow: 0px 5rpx 15rpx 0px rgba(65, 122, 244, 0.4);
  border-radius: 50rpx;
}

.box_list {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0px -15rpx 15rpx 0px rgba(18, 37, 96, 0.05);
  border-radius: 30rpx 30rpx 0px 0px;
  backdrop-filter: blur(10rpx);
  width: 100vw;
  margin-top: 50rpx;
}
</style>